<script>
import { getBannerListFn, delBannerFn } from '@/api/banner'
export default {
    data() {
        return {
            bannerList: []
        }
    },
    mounted() {
        getBannerListFn().then(res => {
            // console.log(res);
            this.bannerList = res.data
        })
    },
    methods: {
        delClick(row) {
            // console.log(row.bannerid);
            delBannerFn({
                bannerid: row.bannerid
            }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    getBannerListFn().then(res => {
                        // console.log(res);
                        this.bannerList = res.data
                    })
                }
            })
        }
    },
}
</script>
<template>
    <div>
        <h3>轮播图列表</h3>
          <el-table :data="bannerList" style="width: 100%">
            <el-table-column type="index" label="序号" width="180" />
            
            <el-table-column label="图片" width="100">
                <template #default="{ row}"	>
                    <el-image :src="row.img"></el-image>
                </template>
            </el-table-column>

            <el-table-column label="是否展示">
                <template #default="{ row}"	>
                    <el-switch
                        v-model="row.flag"
                        class="ml-2"
                        style="
                        --el-switch-on-color: #13ce66; 
                        --el-switch-off-color: #ff4949;
                        "
                    />
                </template>
            </el-table-column>
            <el-table-column prop="alt" label="提示信息" />
            <el-table-column prop="link" label="跳转地址" />
            <el-table-column label="操作" >
                <template #default="{ row}"	>
                    <el-popconfirm 
                        @confirm="delClick(row)" 
                        confirm-button-text="确定" 
                        cancel-button-text="取消" 
                        title="您确定要删除掉该轮播图吗?" 
                    >
                        <template #reference>
                        <el-button>删除</el-button>
                        </template>
                    </el-popconfirm>

                    
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>